<template>
  <div class="app-container">
    <el-card style="position: relative">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="活动概况" name="activity">
          <ActivityOverview v-if="activeName === 'activity'" />
        </el-tab-pane>
        <el-tab-pane label="礼品券列表" name="coupon">
          <CouponList v-if="activeName === 'coupon'" />
        </el-tab-pane>
        <el-tab-pane label="销售渠道管理" name="channel">
          <ChannelManage v-if="activeName === 'channel'" />
        </el-tab-pane>
        <el-tab-pane label="活动设置" name="set">
          <ActivitySet v-if="activeName === 'set'" />
        </el-tab-pane>
      </el-tabs>
      <el-button
        style="position: absolute; top: 20px; right: 20px"
        type="primary"
        v-if="activeName === 'coupon'"
        @click="addGift"
        >新增礼品券</el-button
      >
    </el-card>
  </div>
</template>

<script>
import ActivityOverview from './activity'
import CouponList from './coupon'
import ChannelManage from './channel'
import ActivitySet from './set'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'Gift',
  components: {
    ActivitySet,
    CouponList,
    ChannelManage,
    ActivityOverview
  },
  computed: {
    ...mapState('base', ['tab_key']),
    activeName: {
      get() {
        return this.tab_key ? this.tab_key : 'activity'
      },
      set(val) {
        this.SET_TABS_TYPE({ value: val })
      }
    }
  },
  methods: {
    ...mapMutations('base', ['SET_TABS_TYPE']),
    handleClick({ name }) {
      this.SET_TABS_TYPE({ value: name })
    },
    addGift() {
      this.$router.push({ name: 'AddCoupon' })
    }
  }
}
</script>

<style lang="scss" scoped></style>
